<script setup lang="ts">
import type { SideBarConfig } from '@/config/types'

interface Props {
  sideBarConfig: SideBarConfig[]
}
defineProps<Props>()

const handleContainer = (): HTMLElement => {
  const container = document.querySelector('#main-container') as HTMLElement
  return container
}
</script>

<template>
  <div class="anchor-class">
    <a-anchor
      :showInkInFixed="true"
      :affix="false"
      :getContainer="handleContainer"
    >
      <a-anchor-link
        v-for="item in sideBarConfig"
        :key="item.href"
        :href="item.href"
        :title="item.title"
      />
    </a-anchor>
  </div>
</template>

<style lang="scss" scoped>
.anchor-class {
  :deep(.ant-anchor-link-active > .ant-anchor-link-title) {
    --tw-text-opacity: 1;
    color: rgba($--system-theme, var(--tw-text-opacity));
    transition: all ease;

    &::after {
      transform: scaleX(1);
    }
  }
  :deep(a:hover) {
    --tw-text-opacity: 1;
    color: rgba($--system-theme, var(--tw-text-opacity));
  }
  :deep(.ant-anchor-link-title) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 600;
    overflow: visible;
    display: inline-block;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      display: block;
      left: 0;
      bottom: -5px;
      border-radius: 50%;
      background: rgba($--system-theme var(--tw-text-opacity));
      transform: scaleX(0);
      transition: all 0.5s;
    }
  }
}
</style>
